<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue2 自定义指令 测试 nextTick</title>
</head>

<body>
  <div id="app">
    <span>123</span><button @click="showInput">编辑</button>
    <br>
    <input v-if="inputVisible" type="text" ref="input">
  </div>
  <script src="js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        inputVisible: false
      },
      methods: {
        showInput() {
          this.inputVisible = true
          // 由于vue是异步更新视图，在数据变化时不会立刻更新视图，故无法在inputVisible为true时立刻渲染出input组件，即无法调用input.focus()的focus()
          // this.$nextTick(fn)，可以等待视图重新渲染后再调用fn
          // 可以用setTimeOut实现，但延时多久，是不确定的
          // 推荐用 this.$nextTick(fn)
          this.$nextTick(() => {
            this.$refs.input.focus()
          })
        }
      }
    })
  </script>
</body>

</html>